<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/WEB-INF/include/header.jsp" %>
<style>
    iframe { width: 100%; height: 600px; }
    span { margin-left: 20px; }
    .noborder { border: none; }
</style>
<script>
$(function() {
    $("button[data-url]").click(function() {
        var url = $(this).attr("data-url");
        $("iframe").attr("src", url);
    });
    $("button[data-size]").click(function() {
        var size = $(this).attr("data-size");
        $("iframe").css("height", size);
    });
    $("input:checkbox").change(function() {
        $("iframe").toggleClass("noborder");
    });
});
</script>
</head>
<body>

<div class="container">

    <h1>iframe 테스트1</h1>
    <hr/>

    <iframe>
    </iframe>

    <hr />

    <div class="controls">
        <span>URL: </span>
        <button class="btn" type="button" data-url="http://www.skhu.ac.kr">학교</button>
        <button class="btn" type="button" data-url="http://www.daum.net">다음</button>
        <button class="btn" type="button" data-url="http://www.auction.co.kr">옥션</button>
        <button class="btn" type="button" data-url="test1_inner1.jsp">test1_inner1.jsp</button>
        <button class="btn" type="button" data-url="test1_inner2.jsp">test1_inner2.jsp</button>

        <span>height: </span>
        <button class="btn" type="button" data-size="300px">300px</button>
        <button class="btn" type="button" data-size="600px">600px</button>
        <button class="btn" type="button" data-size="900px">900px</button>

        <span>border: </span>
        <input type="checkbox" checked />
    </div>

</div>

</body>
</html>